<template>
  <div class="login">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <h2>借阅后台登录</h2>
      </div>
      <el-form
        ref="form"
        :model="admin"
        :rules="rules"
      >
        <el-form-item label="appid" prop="appid">
          <el-input v-model="admin.appid"></el-input>
        </el-form-item>
        <el-form-item label="密钥" prop="secret">
          <el-input
            type="password"
            v-model="admin.secret"
          ></el-input>
        </el-form-item>
        <el-form-item class="buttons">
          <el-button @click="handleReset">重置</el-button>
          <el-button @click="handleLogin" type="primary">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { getAccessToken } from '@/services/login'
export default {
  name: 'Index',
  data () {
    return {
      admin: {
        appid: 'wx11cbec5f06b63305',
        secret: '2a0ca8ca0949c80427e4ed4bf6ce70ec',
        grant_type: 'client_credential'
      },
      rules: {
        appid: [
          { required: true, message: 'appid不能为空', trigger: 'blur' }
        ],
        secret: [
          { required: true, message: 'secret密钥不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 重置表单
    handleReset () {
      this.$refs.form.resetFields()
      this.admin = {
        appid: '',
        secret: '',
        grant_type: 'client_credential'
      }
    },
    // 登录
    handleLogin () {
      // 表单校验
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          // 发送请求获取 access_token
          const { data } = await getAccessToken(this.admin)
          if (data.access_token) {
            // 处理存储到 Vuex 中的用户数据
            const userData = this.admin
            userData.access_token = data.access_token
            // 将图床的 token 也顺势放进去
            userData.token = 'aodemGIKAYk2VYSrkqVGfCtVRG3Y673B'
            // 存储到 Vuex 中
            this.$store.commit('changeUser', userData)
            // 如果是从其他操作页跳转过来的会重定向返回
            this.$router.push({
              path: this.$route.query.redirect ? this.$route.query.redirect : '/user'
            })
            // 提示用户
            this.$message.success('登录成功')
          } else {
            this.$message.error('登录失败')
          }
        } else {
          this.$message.error('请重新确认输入内容')
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import url('~@/styles/my-form.scss');
@import url('~@/styles/my-button.scss');
.login {
  position: relative;
  width: 100%;
  height: 100%;
  color: #555;
  background-image: url('~@/assets/images/login_bg.jpg');
  background-size: 100vw 100vh;
  .el-card {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: 500px;
    min-width: 300px;
    border-radius: 30px;
    overflow: hidden;
    opacity: .8;
  }
  h2 {
    margin: 0;
    text-align: center;
  }
  ::v-deep .el-form-item__content {
    display: flex;
    justify-content: space-between;
    width: 100%;
  }
}
</style>
